<template>
	<view class="mypage">
		<view class="header">
			<image class="avatar" :src="userinfo.avatar_file.url" style="width: 300rpx;height: 300rpx;"></image>
			<view class="mypage-tools">
				<view class="userinfo">
					<view class="userinfo-item">
						{{userinfo.nickname}}
					</view>
					<view class="userinfo-item">
						最后登录日期：
					</view>
					<view class="userinfo-item">
						{{getDate(userinfo.last_login_date)}}
					</view>
					<view class="btn-edit" @click="getuserinfo">
						修改个人资料
					</view>
				</view>
			</view>
		</view>

		<view class="like">
			<view class="title">
				我的收藏
			</view>
			<!-- 基于 uni-list 的页面布局 -->

			<view class="item" v-for="item in articles" :key="item.id" @click="handleItemClick(item._id)">
				<view class="left">
					<image :src="item.images[0].fileID" style="width: 200px;height: 200px;"></image>
				</view>
				<view class="right">
					<view class="article_title">
						{{item.title}}
					</view>
					<view class="detail">
						<view class="author">
							{{ item.user_id[0].username }}
						</view>
						<view class="date">
							{{ getDate(item.last_modify_date) }}
						</view>
						<view class="category">
							<text
								:class="{'footer-category-text-blue': item.category_id[0].text == '谁有','footer-category-text-red': item.category_id[0].text == '我有'}">{{item.category_id[0].text}}</text>
						</view>
					</view>
				</view>

			</view>
			<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
			<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		convertTimestampToDate
	} from '../../utils/time.js';
	const db = uniCloud.database();
	const articleApi = uniCloud.importObject('article')
	export default {
		data() {
			return {
				tipShow: false, // 是否显示顶部提示框,
				articles: [],
				loading: true
			};
		},
		methods: {
			getuserinfo() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
				})
			},

			getDate(time) {
				return convertTimestampToDate(time);
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: '../opendb-news-articles/detail?id=' + id
				});
			},

		},
		computed: {
			...mapGetters([
				'userinfo',
				// ...
			]),
		},
		async onLoad() {
			const res = await articleApi.getmyCollectArticle(this.userinfo.article_likes_ids)
			this.articles = res.data
			console.log(res)
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/uni-ui.scss';

	.mypage {
		padding-top: 10px;
		text-align: center;

		.header {
			padding: 10px;
			display: flex;
			flex-direction: row;

			.avatar {
				border-radius: 5px;
			}

			.mypage-tools {
				display: flex;
				flex-direction: column;
				margin-left: 10px;

				.userinfo {
					display: flex;
					flex-direction: column;
					text-align: left;

					.userinfo-item {
						font-weight: bold;
						margin-bottom: 5px;
					}

					.btn-edit {
						color: red;
						border: 1px red solid;
						border-radius: 3px;
						padding: 2px 5px;
						width: 100px;
					}

					margin-bottom: 10px;
				}
			}
		}


		.like {
			padding: 10px;

			.title {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 10px;
				color: white;
				background-color: blue;
			}

			.item {
				display: flex;
				flex-direction: row;
				.left {
					
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.article_title {
						font-size: 18px;
						font-weight: bold;
					}
					.detail {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.author {}
						.date {}
						.category {
							.footer-category-text-blue {
								color: white;
								background-color: blue;
								padding: 1px 3px;
								border-radius: 3px;
								font-size: 25rpx;
								font-weight: bold;
							}

							.footer-category-text-red {
								color: white;
								background-color: red;
								padding: 1px 3px;
								border-radius: 3px;
								font-size: 25rpx;
								font-weight: bold;
							}
						}
					}
				}


			}
		}


	}
</style>